<template>
	<div>
		<top-nav bgColor="white" title="统计" returnPath="上一级"></top-nav>
		<section style="height:3rem"></section>
		  <mu-tabs :value="activeTab" @change="handleTabChange">
		    <mu-tab value="tab1" title="到课情况"/>
		    <mu-tab value="tab2" title="出勤情况"/>
		    <!--<mu-tab value="tab3"  title="出勤日统计"/>
		    <mu-tab value="tab4"  title="月统计"/>-->
		  </mu-tabs>
		  
		  <!--<section style="height: 3rem;background:#2196f3;display: flex;justify-content: center;align-items: center;">
		  		<span style="flex: 1;color: white;justify-content: center;align-items: center;" @click="changeEcharts('tab1')">
		  			到课情况
		  		</span>
		  		<span style="flex: 1;color: white;justify-content: center;align-items: center;" @click="changeEcharts('tab2')">
		  			出勤情况
		  		</span>
		  </section>-->
		  <div style="height: 26rem;">
			  	<div class="echartsClass" style="background:salmon;" :class="activeTab=='tab1'?'topEcharts':''">
			  	图表1
			  		<div id="attendanceRate" style="height:10rem;">
			  			
			  		</div>
					
			   </div>
			   <div class="echartsClass"  style="background: violet;" :class="activeTab=='tab2'?'topEcharts':''">
			  	图表2
			  		<div id="teacherAttendancePie" style="height:10rem;">
			  			
			  		</div>
				   
			  </div>
		  </div>
		  
		  <!--<div v-if="activeTab === 'tab3'">
		    <h2>Tab Three</h2>
		    <p>
		      这是第三个 tab
		    </p>
		  </div>
		   <div v-if="activeTab === 'tab4'">
		    <h2>Tab 4</h2>
		    <p>
		    </p>
		  </div>-->
	</div>
</template>

<script>
	import topNav from '@/components/assembly/topNav/topNav'
	export default {
	  data () {
	    runEs6();
	    return {
	      activeTab: 'tab1',
	      attendanceRateOption:{
        		title : {
            		text: '到课率',
            		x:'left'
       			},
        		tooltip : {
            	trigger: 'item',
            	formatter: "{a} <br/>{b} : {c} ({d}%)"
        		},
//      		legend: {
//          		orient: 'vertical',
//          		left: 'left',
//          		data: ['相符','不相符']
//      		},
        		series : [
            		{
                	name: '占比',
                	type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                		data:[
                    	{value:335, name:'优'},
                    	{value:310, name:'良'},
                    	{value:234, name:'差'}
                		],
                		itemStyle: {
                    	emphasis: {
                        	shadowBlur: 10,
                        	shadowOffsetX: 0,
                        	shadowColor: 'rgba(0, 0, 0, 0.5)'
                    	}
                	}
            		}
       					 ]
    	},
    	  teacherAttendancePieOption  : {
    		title : {
        		text: '出勤情况',
        		x:'left'
    	 },
    			tooltip : {
        		trigger: 'item',
        		formatter: "{a} <br/>{b} : {c} ({d}%)"
    		},
    		legend: {
        		orient: 'vertical',
        		left: 'left',
        		data: ['正常','迟到','早退','调整']
    		},
    		series : [
        	{
            	name: '占比',
            	type: 'pie',
            // radius : '55%',
            // center: ['50%', '60%'],
            		data:[
                		{value:335, name:'正常'},
                		{value:335, name:'迟到'},
                		{value:310, name:'早退'},
                		{value:234, name:'调整'}
            		],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
	    
	    }
	  },
	    components:{
    		topNav
  	 },
  	  watch:{
  	  },
  	  mounted(){
		this.initEcharts()
  	  },
	  methods: {
	    handleTabChange (val) {
	      this.activeTab = val
	    },
	    
	    handleActive () {
	      window.alert('tab active')
	    },
	    changeEcharts(val){
	    	this.activeTab=val
	      if(val=='tab1'){
	      	 this.initEcharts()
	      }else if(val=='tab2'){
	      	this.teacherEcharts()
	      }
	    },
	    initEcharts () {
      		let that = this
      		var echarts = require('echarts')
      		var myChart = echarts.init(document.getElementById('attendanceRate'))
      		myChart.setOption(that.attendanceRateOption)
      		var myChart1 = echarts.init(document.getElementById('teacherAttendancePie'))
      		myChart1.setOption(that.teacherAttendancePieOption)

		},
      		
   },
// 	getAttendanceRate(){
// 		that.axios.post('/iyx/studentsSignIn/sginIn',{
//		  	'classCourseId':that.courseData.classCourseId,
//		  	'teacherId':that.courseData.courseTeacherId,
//		  	'teacherName':that.courseData.courseTeacherName,
//		  	'sginInState':sginInState}).then(function (response) {
//         		that.studentSginInData=response.data.data
//         		if(that.studentSginInData!=null)
//         		{
//         			that.isSgin=true
//         		}
//         });
//	  }
    }
	function runEs6(){
//		console.info(545)
//		let [a,b,c]=['s1',0,'dfs']
//		alert(a)
	}
</script>

<style>
	.echartsClass{
		position: absolute;
		height: 26rem;
		z-index: 10;
		width: 100%;
	}
	.topEcharts{
		z-index: 150;
	}
</style>